<%= content_for :title, t("scaffold.new.title", model: "Add On") %>

<div>
  <div class="flex items-center justify-between mb-4">
    <h1 class="text-lg font-medium">
      <%= link_to "Add Ons", add_ons_path, class: "text-black dark:text-white" %>
      <span class="text-gray-400 font-light mx-2">\</span>
      <%= t("scaffold.new.title", model: "Add On") %>
    </h1>
  </div>

  <div class="card card-bordered bg-base-100">
    <div class="card-body">
      <%= form_with(model: @add_on) do |form| %>
        <div class="space-y-8">
          <%= render(FormFieldComponent.new(
            label: "Name",
            description: "A unique name for your add on, only lowercase letters, numbers, and hyphens are allowed."
          )) do %>
            <%= form.text_field :name, class: "input input-bordered w-full focus:outline-offset-0", autofocus: true, required: true %>
            <label class="label">
              <span class="label-text-alt">* Required</span>
            </label>
          <% end %>

          <%= render(FormFieldComponent.new(
            label: "Cluster",
            description: "The cluster to deploy your add on to."
          )) do %>
            <%= form.collection_select :cluster_id, current_account.clusters, :id, :name, {}, { class: "select select-bordered w-full" } %>
            <label class="label">
              <span class="label-text-alt">* Required</span>
            </label>
          <% end %>

          <%= render "shared/partials/namespace_input_group", form: %>
        </div>

        <div data-controller="card-select">
          <div class="form-group">
            <%= form.text_field :chart_type, class: "hidden", data: { 'card-select-target': "input" } %>
          </div>

          <h4>Select a chart</h4>
          <div class="text-sm text-gray-500">
            More charts coming soon.
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 mt-4 mb-12">
            <% K8::Helm::Client::CHARTS['helm']['charts'].each do |chart| %>
            <div class="relative">
              <% if chart['coming_soon'] %>
                <div class="absolute badge badge-error top-[-10px] right-[-10px] z-10">
                  Coming Soon!
                </div>
              <% end %>
              <div class="card bg-base-100 shadow-xl <%= chart['coming_soon'] ? 'cursor-not-allowed' : 'cursor-pointer' %> overflow-hidden border hover:border-solid border-base-100 hover:border-base-300"
                  data-card-select-target="card"
                  data-chart-url="<%= chart['chart_url'] %>"
                  <% unless chart['coming_soon'] %>
                    data-action="click->card-select#selectCard"
                  <% end %>
                  data-card-name="<%= chart['name'] %>">
                <figure class="px-4 pt-8 overflow-visible">
                  <div class="w-full flex items-center justify-center">
                    <img
                      src="<%= chart['logo'] %>" alt="<%= chart['name'] %>"
                      class="h-[50px] object-contain <%= chart['coming_soon'] ? 'opacity-50' : 'opacity-100' %>"
                    />
                  </div>
                </figure>
                <div class="card-body items-center text-center">
                  <%= chart['friendly_name'] || chart['name'].titleize %>
                </div>
              </div>
            </div>
            <% end %>
          </div>

          <% K8::Helm::Client::CHARTS['helm']['charts'].each do |chart| %>
            <div class="mt-8 card-form hidden card-<%= chart['name'] %>">
              <h4 class="text-lg font-bold"><%= chart['name'].titleize %> Settings</h4>
              <hr class="mt-2 mb-6 border-base-content/10" />
              <% unless chart['coming_soon'] %>
                <%= render "add_ons/chart_form", chart: chart, form: form %>
              <% end %>
            </div>
          <% end %>

          <%= form.text_field "chart_url", class: "hidden", data: { 'card-select-target': "chartUrl" } %>

          <div>
            <div class="collapse">
              <input aria-label="Accordion radio" type="checkbox" name="accordion" class="w-full">
              <div class="collapse-title text-md font-medium">Advanced Settings</div>
              <div class="collapse-content">
                <div data-controller="yaml-editor">
                  <%= form.text_area :values_yaml, 
                      class: "code textarea textarea-bordered w-full", 
                      placeholder: "Paste your values.yaml here.", 
                      rows: 10,
                      data: { 'yaml-editor-target': 'textarea' } %>
                  <div data-yaml-editor-target="editor"></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="form-footer">
          <%= form.button "Create Add On", class: "btn btn-primary" %>

          <% if form.object.new_record? %>
            <%= link_to t("cancel"), add_ons_path, class: "btn btn-secondary" %>
          <% else %>
            <%= link_to t("cancel"), add_on_path(@add_on), class: "btn btn-secondary" %>
          <% end %>
        </div>
      <% end %>
    </div>

  </div>
</div>
